<template>
    <div class="app">
       
            <div class="left">
               <div class="img"><img src="../../../public/logo.png" alt=""><span class="logo">后台系统</span></div> 
               
      <router-link to="/host"> <div class="right" @click="clear" >退出</div></router-link>    
     
            </div>
            <div class="menu">
           <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router=true>
            <el-submenu index="1">
        <template slot="title">影视管理</template>
        <!-- <el-menu-item index="2-1">电视剧</el-menu-item> -->
        <el-menu-item index="1-4">影视信息</el-menu-item>
        <!-- <el-menu-item index="1-5">影视上传</el-menu-item> -->
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">用户管理</template>
        <!-- <el-menu-item index="2-1">电视剧</el-menu-item> -->
        <el-menu-item index="2-4" >用户信息</el-menu-item>
        <!-- <el-menu-item index="2-5">用户</el-menu-item> -->
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">图片管理</template>
        <!-- <el-menu-item index="2-1">电视剧</el-menu-item> -->
        <el-menu-item index="3-4" >轮播图管理</el-menu-item>
        <!-- <el-menu-item index="2-5">用户</el-menu-item> -->
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">评论管理</template>
        <!-- <el-menu-item index="2-1">电视剧</el-menu-item> -->
        <el-menu-item index="4-1" >用户评论管理</el-menu-item>
        <!-- <el-menu-item index="2-5">用户</el-menu-item> -->
      </el-submenu>
    </el-menu>   
           </div>

    
     
    </div>
    
    
    </template>
    <script>
    import { mapGetters,mapActions } from "vuex";
     export default {
      data() {
        return {
            input: '',
            activeIndex: '1',
            activeIndex: '2',
    
        }
      },
      methods:{
          handleSelect(key, keyPath) {
            //点击事件
            console.log(key, keyPath);
          },
          clear(){
            localStorage.removeItem("admin")
          // localStorage.setItem("states",true)
             
          }
        }
        
    
    }
    
    </script>
    
    <style scoped>
    a{
        text-decoration: none;
        color: black;
    }
    .right{
         position: relative;
         left: 1185px;
         top: -38px;
        cursor: pointer;
        color: blue;
    }
    .app{
        width: 100%;
        display: flex;
        justify-content:center;
        position: relative;
        left: -329px;
    
    }
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .img{
                width: 160px;
                height: 50px;
                border-radius: 50%;
             
            }
            .logo{
                color: blue;
                font-size: 25px;
                font-weight: 900;
                font-style: italic;
                font-family:"微软雅黑";
                position: relative;
                top: -16px;
                margin-left: 10px;   
                 
            }
            .left{
                 
                width: 260px;
                height: 50px;
                margin-left: -22px;
            }
            .menu{

              
position: relative;
left: 250px;
top: -10px;

}

    
    </style>
    